<template>
  <div>
    <a-row :gutter="16">
      <a-collapse default-active-key="1" expandIconPosition="right" style="margin-bottom: 10px; border: 1px solid #e8e8e8;">
        <a-collapse-panel key="1" header="销售订单详情">
          <div>
            <a-descriptions>
              <a-descriptions-item label="订单编码">{{ orderInfo.code }}</a-descriptions-item>
              <a-descriptions-item label="客户名称">{{ orderInfo.customerName }}</a-descriptions-item>
              <a-descriptions-item label="含税总额">{{ orderInfo.totalTaxPrice }}</a-descriptions-item>
              <a-descriptions-item label="税率">{{ orderInfo.taxRate }}%</a-descriptions-item>
              <a-descriptions-item label="签订地">{{ orderInfo.signPlace }}</a-descriptions-item>
              <a-descriptions-item label="签订时间">{{ orderInfo.signDate }}</a-descriptions-item>
              <a-descriptions-item label="联系人">{{ orderInfo.contacts }}</a-descriptions-item>
              <a-descriptions-item label="联系方式">{{ orderInfo.tel }}</a-descriptions-item>
              <a-descriptions-item label="交付地址">{{ orderInfo.deliveryAddress }}</a-descriptions-item>
              <a-descriptions-item label="交付时间">{{ orderInfo.deliveryTime }}</a-descriptions-item>
              <a-descriptions-item label="订单总数">{{ orderInfo.totalQty }}</a-descriptions-item>
              <a-descriptions-item label="已出库数">{{ orderInfo.totalOutboundQty }}</a-descriptions-item>
              <a-descriptions-item label="备注">{{ orderInfo.remark }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <a-tag :color="orderInfo.status === 'PARTIAL' ? 'orange' : orderInfo.status === 'FINISHED' ? 'green' : 'blue'" slot="extra">{{ orderInfo.statusStr }}</a-tag>
        </a-collapse-panel>
      </a-collapse>
    </a-row>
    <a-row :gutter="16">
      <a-card
        :tabList="tabList"
        :activeTabKey="activeTabKey"
        @tabChange="(key) => {this.activeTabKey = key}"
      >
        <a-table
          v-if="activeTabKey === '1'"
          :columns="orderItemColumns"
          :dataSource="orderItemData"
          bordered
          size="small"
          :rowKey="(record) => record.code"
          :pagination="false"
        />
        <a-collapse v-if="activeTabKey === '2' && outboundSaleData.length > 0" expandIconPosition="left" style="background-color: #fafafa;">
          <template #expandIcon="props">
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>
          <a-collapse-panel :key="item.outboundCode" v-for="(item) in outboundSaleData" class="customCollapse">
            <div>
              <a-table
                :columns="outboundItemColumns"
                :dataSource="item.materialItemList"
                bordered
                size="small"
                :rowKey="(record) => record.code"
                :pagination="pagination"
              />
            </div>
            <span slot="header">
              出库单号: <a @click="goToOutboundViewForm(item.outboundCode)">{{ item.outboundCode }}</a>
            </span>
            <a-badge :count="item.totalQty" :number-style="{ backgroundColor: '#52c41a' }" slot="extra"/>
          </a-collapse-panel>
        </a-collapse>
        <a-empty v-if="activeTabKey === '2' && outboundSaleData.length === 0" />
        <a-table
          v-if="activeTabKey === '3'"
          :columns="orderItemColumns"
          :dataSource="orderItemData"
          bordered
          :rowKey="(record) => record.code"
          :pagination="false"
        />
      </a-card>
    </a-row>
    <footer-tool-bar>
      <a-button class="subButton" @click="handleCancel">返回</a-button>
      <a-button type="primary" @click="reloadPage">刷新</a-button>
    </footer-tool-bar>
  </div>
</template>
<script>
  import FooterToolBar from '@/components/FooterToolbar'
  import { saleOrderDetail } from '@/api/modular/main/order/sale/saleOrderManage'
  import { outboundSaleList } from '@/api/modular/main/outbound/sale/outboundSaleManage'
  import moment from 'moment'
  export default {
    components: {
      moment,
      FooterToolBar
    },
    data () {
      return {
        activeTabKey: '1',
        statusData: [],
        orderItemData: [],
        outboundSaleData: [],
        orderInfo: {},
        tabList: [
          {
            key: '1',
            tab: '订单明细'
          },
          {
            key: '2',
            tab: '发货明细'
          },
          {
            key: '3',
            tab: '退/换货明细'
          }
        ],
        pagination: {
          pageSize: 10
        },
        orderItemColumns: [
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'materialCode' }
          },
          {
            title: '物料名称',
            dataIndex: 'materialName',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'materialName' }
          },
          {
            title: '物料型号',
            dataIndex: 'materialModel',
            align: 'center',
            width: 300,
            scopedSlots: { customRender: 'materialModel' }
          },
          {
            title: '单价(￥)',
            dataIndex: 'unitPrice',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'unitPrice' }
          },
          {
            title: '已出库数',
            dataIndex: 'outboundQty',
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'outboundQty' }
          },
          {
            title: '数量',
            dataIndex: 'qty',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'qty' }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            scopedSlots: { customRender: 'unit' }
          },
          {
            title: '小计(￥)',
            dataIndex: 'amount',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '货期',
            dataIndex: 'deliveryDate',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'deliveryDate' }
          }
        ],
        outboundItemColumns: [
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 250,
            scopedSlots: { customRender: 'materialCode' }
          },
          {
            title: '物料名称',
            dataIndex: 'materialName',
            align: 'center',
            width: 250,
            scopedSlots: { customRender: 'materialName' }
          },
          {
            title: '物料型号',
            dataIndex: 'materialModel',
            align: 'center',
            scopedSlots: { customRender: 'materialModel' }
          },
          {
            title: '出库数量',
            dataIndex: 'qty',
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'qty' }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            scopedSlots: { customRender: 'unit' }
          }
        ]
      }
    },
    computed: {
    },
    created () {
      const statusOption = this.$options
      this.statusData = statusOption.filters['dictData']('saleorder_status')
    },
    activated () {
        const oldCode = this.orderInfo.code
        this.orderInfo.code = this.$route.query.code
        if (oldCode !== this.orderInfo.code) {
          this.reloadPage()
        }
      },
    methods: {
      saleOrderDetail () {
        saleOrderDetail(this.orderInfo.code).then((res) => {
          if (res.success) {
            this.orderItemData = res.data.itemList
            this.orderInfo.code = res.data.code
            this.orderInfo.contacts = res.data.contacts
            this.orderInfo.companyName = res.data.companyName
            this.orderInfo.customerName = res.data.customerName
            this.orderInfo.deliveryAddress = res.data.deliveryAddress
            this.orderInfo.deliveryTime = res.data.deliveryTime
            this.orderInfo.remark = res.data.remark
            this.orderInfo.signDate = res.data.signDate
            this.orderInfo.signPlace = res.data.signPlace
            this.orderInfo.status = res.data.status
            this.orderInfo.statusStr = this.statusData.find(item => res.data.status === item.code).name
            this.orderInfo.taxRate = res.data.taxRate
            this.orderInfo.totalQty = res.data.totalQty
            this.orderInfo.totalOutboundQty = res.data.totalOutboundQty
            this.orderInfo.tel = res.data.tel
            this.orderInfo.totalTaxPrice = '￥' + res.data.totalTaxPrice
          } else {
            this.$message.error('数据加载失败:' + res.message)
          }
        })
      },
      outboundSaleList () {
        outboundSaleList(this.orderInfo.code).then((res) => {
          if (res.success) {
            this.outboundSaleData = res.data
            // this.outboundSaleData.forEach(item => {
            //   item.header = '出库时间：' + moment(item.createTime).format('YYYY-MM-DD')
            // })
            console.log(this.outboundSaleData)
          } else {
            this.$message.error('出库数据加载失败:' + res.message)
          }
        })
      },
      reloadPage () {
        this.activeTabKey = '1'
        this.saleOrderDetail()
        this.outboundSaleList()
      },
      handleCancel () {
        this.$router.push({ path: '/saleOrder' })
      },
      goToOutboundViewForm (code) {
        this.$router.push({
          path: '/outboundSaleForm/view',
          query: {
            code: code
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .ant-collapse {
    background-color: #fff;
  }
  .ant-collapse-header {
    font-size: 16px;
  }
  .ant-collapse-content {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
  }
  .customCollapse .ant-collapse-header {
    font-size: 14px;
  }
</style>
